<template>
  <div id="right-container">
    <div class="rightContainer">
      <div class="rightContainer-title">
        五大领域项目比例
      </div>
      <div>
        <roseChart1 />
      </div>
      <div style="margin-top:10px;height: calc(33.2vh);">
        <cards />
        <!-- <scrollBoard /> -->
      </div>
      <div style="margin-left:10px;margin-top:30px" class="card-item2">
        <div class="title">各区县入库与揭榜数量</div>
        <div style="height:200px">
          <VEcharts
            ref="chartClass"
            autoresize
            :options="leftconfig"
            class="chartClass"
            style="width:100%;height:100%"
          />
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import roseChart1 from './roseChart1';
import cards from './cards';
// import scrollBoard from './scrollBoard';
import VEcharts from '@/components/vecharts';
export default {
  components: {
    roseChart1,
    // scrollBoard,
    VEcharts,
    cards
  },
  data() {
    return {
      leftconfig: {}
    };
  },
  mounted() {
    this.getconfig();
    // setInterval(() => {
    //   this.getconfig();
    // }, 10000);
  },
  methods: {
    getconfig() {
      this.leftconfig = {};
      this.$refs.chartClass.clear();
      this.leftconfig = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '0%',
          top: '8%',
          bottom: '2%',
          containLabel: true
        },

        calculable: true,
        xAxis: [
          {
            type: 'category',
            data: ['本级', '越城区', '柯桥区'],
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
            name: '入库',
            type: 'bar',
            barGap: '0%',
            data: [2.0, 4.9, 7.0],
            barWidth: 20, // 柱图宽度
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          },
          {
            name: '揭榜数',
            type: 'bar',
            data: [2.6, 5.9, 9.0],
            barGap: '0%',
            barWidth: 20, // 柱图宽度
            // markPoint: {
            //   data: [
            //     { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183 },
            //     { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
            //   ]
            // },
            markLine: {
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
        ]
      };
    }
  }

};
</script>

<style scoped lang='scss' >
   .rightContainer{
    border: 1px solid #848383;
    height: calc(60vh);
    border-radius: 10px;
   }
   .rightContainer-title{
     margin-top: 10px;
     font-size: 18px;
     font-weight: bolder;
     color: #fff;
     text-align: center
   }
   .card-item2{
      background-color: rgba(6, 30, 93, 0.5);
    border-top: 2px solid rgba(1, 153, 209, .5);
    width: 93%;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    height: calc(100vh - 60vh - 130px );
   }

</style>
